<template>
	<div>
        <div class="wrap_a" @click="clickFun(5)">
            <img src="../../../../static/img/lanhu/52.png" alt="" style="width:147px;height: 14px ;"/>        
        </div>            
        <div class="b">
            <div class="wrap3">   
			  <div class="container-water-fall" style="background: #f2f2f2;">
				<waterfall :col='col' 
					:gutterWidth="0"
					:data="goodsList"   
					 :isTransition="false"
					 >
					<template>					
					    <div class="box" :data-id="item.comId"
					    	 v-for="item in goodsList">
					    	<div class="imgWrap">
					    	   <img :src="item.goodsImage" alt="" class="comId" :data-id="item.comId" @click="clickFun(4,item)"/>
					    	</div>						    							    	
					    	<div class="desc">
					    	   <div class="title comId" :data-id="item.comId" @click="clickFun(4,item)">
					    	   	<span>{{item.comName}}</span>
					    	   </div>
					    	   <div class="desc_layout1 comId" :data-id="item.comId" @click="clickFun(4,item)">
					    	   	  <span class="tag"></span>
					    	   	  <span>{{item.goodsWants}}人想要</span>
					    	   </div>
					    	   <div class="desc_layout1">
					    	   	  <span class="price1">&yen;<span class="comId" :data-id="item.comId" @click="clickFun(4,item)">{{item.comPrice}}</span></span>
					    	   	  <span class="price2">&yen;<span class="comId" :data-id="item.comId" @click="clickFun(4,item)">{{item.comOriginalprice}}</span></span>
					    	   </div>						    	   
						       <div class="desc_layout2">
						    		<img :src="item.avatar" alt="" :data-id="item.comId" class="comId" v-if="item.avatar" @click="clickFun(4,item)"/>
						    		<img src="../../../../static/img/lanhu/45.png" alt="" :data-id="item.comId" class="comId"  @click="clickFun(4,item)" v-else/>
						    		<span style="vertical-align: -3px;" :data-id="item.comId" class="comId" @click="clickFun(4,item)">{{item.userNickname}}</span>
						       </div>							       
					    	</div>						    							    	
					    </div>
				    </template>
				</waterfall>				
			  </div>             	
            </div>         	
        </div>
	
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
         col:2,                    // 一行显示2个item	  
       }
	},
	props:{
		goodsList:{
			type:Array,
			default:()=>[]
		}
	},
	methods: {	
        clickFun(type,item){
        	this.$emit('clickFun',type,item)
        },		
        jumpDetail(id){
        	console.log(id)
        },
	},
	mixins:[publicFun],//混入		
	mounted() {

	}
}	
</script>

<style >
.wrap_a{padding: 30px 0 4px;background: #f2f2f2;text-align: center;}
*{box-sizing: border-box;}
.box {margin-top:16px;}
.imgWrap>img{width: 100%;border-radius: 10px 10px 0 0;display: block;}
.desc{background: #fff;border-radius: 0 0 10px 10px;padding: 10px;}
.desc .title{font-weight: bold;font-size: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.desc_layout1{display: flex;justify-content: space-between;margin-top: 10px;color: #bcbcbc;}
.price1{font-weight: bold;color: #FF3B30;font-size: 14px;}
.price2{text-decoration: line-through;}
.tag>img{width: 32px;height: 16px;display: inline-block;vertical-align: -3px;margin-right: 4px;}
.x-red{color: #e86468;font-weight: bold;}
.ft16{font-size: 16px;}
.desc_layout2{display: flex;margin-top: 10px;color: #bcbcbc;align-items: center;}
.desc_layout2>img{width: 20px;height: 20px;border-radius: 50%;margin-right: 5px;} 
</style>